<template>
  <div class="page-main" style="height: calc(100vh - 125px)">
    <page-title>品类管理</page-title>
    <div class="formbox">
      <query-form
        ref="queryFormRef"
        :render-config="formRenderConfig"
        :render-keys="renderKeys"
        @search="searchHandle"
        @reset="resetHandle"
      />
    </div>
    <!-- 表格 -->
    <table-container
      v-model:columns="columns"
      :loading="false"
      :all-columns="allColumns"
    >
      <template #container-side>
        <a-button
          v-permission="['base:category:delete']"
          :disabled="!selectData.length"
          type="primary"
          @click="deleteItems"
          >批量删除</a-button
        >
        <a-button disabled>提交流程</a-button>
        <a-button disabled>变更流程</a-button>
      </template>
      <a-table
        v-model:selectedKeys="selectData"
        :columns="columns"
        :data="datalist"
        style="height: calc(100vh - 340px)"
        :scroll="{
          x: 1500,
          y: 800,
        }"
        :row-selection="rowSelection"
        row-key="id"
        :loading="isLoading"
        show-empty-tree
        :pagination="false"
        @select="selectItem"
      >
        <template #secretLevel="{ record }">
          <secretLevelInfo
            :record="{
              secretLevel: record.secretLevel,
              secretLevelName: record.secretLevelName,
            }"
          />
        </template>
        <template #operate="row">
          <collapseBtn class="collapse-btn" data-key="[0].children">
            <div>
              <a-button
                v-permission="['base:category:save']"
                :hidden="row.record.categoryHierarchy === '根节点'"
                type="text"
                @click="handleOpen1(row)"
              >
                新增平级
              </a-button>
              <a-button
                v-permission="['base:category:save']"
                :hidden="row.record.categoryHierarchy === '三级'"
                type="text"
                @click="handelzj(row)"
              >
                新增子级
              </a-button>
              <a-button
                v-permission="['base:category:update']"
                :hidden="
                  row.record.secretLevel > userSecretLevel ||
                  row.record.secretLevel === userSecretLevel
                "
                type="text"
                @click="handleOpen2(row)"
                >编辑</a-button
              >
              <!-- <a-button type="text">提交流程</a-button>
              <a-button type="text" @click="processadd">变更流程</a-button> -->
              <a-button
                v-permission="['base:category:delete']"
                :hidden="
                  row.record.categoryHierarchy === '根节点' ||
                  row.record.secretLevel > userSecretLevel ||
                  row.record.secretLevel === userSecretLevel
                "
                type="text"
                @click="delectbtn(row)"
                >删除</a-button
              >
            </div>
          </collapseBtn>
        </template>
      </a-table>
    </table-container>

    <!-- 弹框 -->
    <my-modal
      ref="demoDialogRef"
      :visible="addVisible"
      :modadata="modadatalist"
      @submit="handleSubmit"
      @handle-cancel="handleCancel"
      @handle-ok="handleOk"
    >
    </my-modal>
    <editModal
      ref="demoDialogRef1"
      :modadata="modadatalist1"
      :visible="addVisible1"
      title="Hello from MyModal"
      @handleedit="handleedit"
      @handle-okedit="handleOkedit"
      @submit="handleSubmit"
    >
    </editModal>
    <!-- <processmodal
      ref="demoDialogRef2"
      v-model:visible1="demoDialogRef2"
      title="Hello from MyModal"
      @submit="handleSubmit"
    >
    </processmodal> -->
    <zjmodal
      ref="demoDialogRef3"
      :modadata="modadatalist"
      :visible="addVisible2"
      @handle-cancelzj="handleCancelzj"
      @handle-okzj="handleOkzj"
      @submit="handleSubmit"
    >
    </zjmodal>
  </div>
</template>

<script setup lang="ts">
  import {
    formRenderConfig,
    renderKeys,
  } from '@/views/basic-configuration/catre-manag/basicscreen';
  import { ref, reactive, onMounted } from 'vue';
  import queryForm from '@/common/components/query-form/index.vue';
  import pageTitle from '@/common/components/title/page-title.vue';
  // eslint-disable-next-line import/extensions
  import collapseBtn from '@/common/components/collapse-btn/collapse-btn.jsx';
  import {
    queryAPIRecordListByPage,
    deleteAPIRecord,
    checkdeleteAPIRecord,
  } from '@/api/Basimanagementapi/categorymanagement';
  import tableContainer from '@/common/components/table-container/index.vue';

  import secretLevelInfo from '@/common/components/secret-level-info/index.vue';
  import lodash from 'lodash';
  import { Message, Modal } from '@arco-design/web-vue';
  import columns from './columns';
  import MyModal from './mymodal.vue';
  import editModal from './editbox.vue';
  // import processmodal from './procurementmodal.vue';
  import zjmodal from './zjmodal.vue';

  // 获取表格数据
  const queryFormRef = ref();
  const datalist = ref();
  const selectDataList = ref([]);
  const isLoading = ref(false);
  const getQuickAccessList = async () => {
    isLoading.value = true;
    const { data } = await queryAPIRecordListByPage(
      queryFormRef.value.getStatus()
    );
    isLoading.value = false;
    datalist.value = data;
  };

  onMounted(() => {
    getQuickAccessList();
  });
  const allColumns = lodash.cloneDeep(columns);
  const addVisible = ref<boolean>(false);
  const addVisible1 = ref<boolean>(false);
  const addVisible2 = ref<boolean>(false);
  const demoDialogRef = ref<typeof MyModal | null>(null);
  const demoDialogRef1 = ref('');
  // const demoDialogRef2 = ref('');
  const demoDialogRef3 = ref('');
  const selectData = ref([]);

  const modadatalist = ref({});
  const modadatalist1 = ref<any>('');

  const selectItem = (itemList, item, itemObj) => {
    console.log(itemList, item, itemObj);
    if (itemList.length === 0) {
      selectDataList.value = [];
      return;
    }
    if (itemList.includes(item)) {
      selectDataList.value.push(itemObj);
    } else {
      const index = selectDataList.value.findIndex((v) => v.id === item);
      console.log(index, 'index');
      selectDataList.value.splice(index, 1);
    }
  };
  const deleteItems = async () => {
    const isChildren = selectDataList.value.find((v) => v.children !== null);
    const status = selectDataList.value.find(
      (v) => v.documentPreparationStatusName !== '编制中'
    );
    if (isChildren) {
      Message.warning('存在子节点不可被删除');
      return;
    }
    if (status) {
      Message.warning('只能删除制单状态为编制中的数据');
      return;
    }
    Modal.info({
      title: '请确认',
      content: '您确定要删除选中数据?',
      hideCancel: false,
      onOk: async () => {
        await checkdeleteAPIRecord(selectData.value);
        getQuickAccessList();
      },
    });
  };

  const handleSubmit = (data: any) => {
    console.log(data);
  };
  const handleOpen1 = (row: any) => {
    modadatalist.value = row.record;
    addVisible.value = true;
    // 在这里实现打开弹窗的逻辑
  };
  const handelzj = (row: any) => {
    addVisible2.value = true;
    modadatalist.value = row.record;
  };
  const handleOpen2 = (row: any) => {
    addVisible1.value = true;
    modadatalist1.value = row.record;
  };
  // const processadd = () => {
  //   console.log('Modal is opened');
  //   demoDialogRef2.value.open();
  //   // 在这里实现打开弹窗的逻辑
  // };
  const delrctId = ref();
  const delectbtn = async (row: any) => {
    if (row.record.children?.length > 0) {
      Message.warning('存在子节点不可被删除');
      return;
    }
    if (row.record.documentPreparationStatusName !== '编制中') {
      Message.warning('非编制中数据不可删除');
      return;
    }
    delrctId.value = row.record.id;
    await deleteAPIRecord(delrctId.value);
    getQuickAccessList();
  };

  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
  });

  const handleOk = () => {
    addVisible.value = false;
  };
  const handleOkedit = () => {
    getQuickAccessList();
    addVisible1.value = false;
  };
  const handleCancelzj = () => {
    getQuickAccessList();
    addVisible2.value = false;
  };
  const handleOkzj = () => {
    getQuickAccessList();
    addVisible2.value = false;
  };

  const searchHandle = async (params: any) => {
    getQuickAccessList(params);
  };
  const resetHandle = (data: any) => {
    getQuickAccessList(data);
  };

  const handleCancel = () => {
    addVisible.value = false;
    getQuickAccessList();
  };
  const handleedit = () => {
    addVisible1.value = false;
  };
</script>

<style scoped lang="less">
  .arco-table-container {
    margin-top: 30px;
  }

  .arco-btn-outline {
    color: #1e2228 !important;
    border-color: #d9dee7 !important;
  }

  .collapse-btn {
    ::v-deep .arco-btn {
      padding: 0;
    }
  }
</style>
